<template>
  <el-dialog
    title="触发器"
    :visible="dialogVisible"
    width="50%"
    @open="open"
    @close="close"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
      size="small"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="triggerType">
        <el-select
          @change="changeType"
          v-model="form.triggerType"
          placeholder="请选择"
          class="w100"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="时间间隔"
        prop="triggerConfiguration.repeatInterval"
        v-if="form.triggerType == 'SimpleTrigger'"
      >
        <el-input
          v-model="form.triggerConfiguration.repeatInterval"
          placeholder="请输入时间间隔"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="form.triggerType == 'SimpleTrigger'"
        label="执行次数"
        prop="triggerConfiguration.repeatCount"
      >
        <el-input
          v-model="form.triggerConfiguration.repeatCount"
          placeholder="请输入时间次数"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="form.triggerType == 'CronTrigger'"
        label="Crontab表达式"
        prop="triggerConfiguration.cronExpression"
      >
        <el-input
          placeholder="0 0 2 1 * ? *"
          v-model="form.triggerConfiguration.cronExpression"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">取 消</el-button>
      <el-button
        :loading="btnLoading"
        type="primary"
        @click="sumbit"
        size="small"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { postSchedules, putSchedules } from "@/api/schedules";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      btnLoading: false,
      options: [
        {
          label: "CronTrigger",
          value: "CronTrigger"
        },
        {
          label: "SimpleTrigger",
          value: "SimpleTrigger"
        }
      ],
      form: {
        name: "",
        triggerType: "",
        triggerConfiguration: {
          repeatCount: "",
          repeatInterval: "",
          cronExpression: ""
        }
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        "triggerConfiguration.cronExpression": [
          { required: true, message: "请输入表达式", trigger: "blur" }
        ],
        "triggerConfiguration.repeatInterval": [
          {
            required: true,
            message: "请输入时间间隔",
            trigger: "blur"
          }
        ],
        "triggerConfiguration.repeatCount": [
          { required: true, message: "请输入时间次数", trigger: "blur" }
        ],
        triggerType: [{ required: true, message: "请选择类型" }]
      }
    };
  },
  methods: {
    changeType() {
      console.log("this.$data.form :>> ", this.form);
      this.$refs.ruleForm.clearValidate([
        "repeatCount",
        "repeatInterval",
        "cronExpression"
      ]);
    },
    open() {},
    sumbit() {
      this.$refs["ruleForm"].validate(async valid => {
        if (valid) {
          this.btnLoading = true;
          console.log("this.form  :>> ", this.form);
          try {
            if (!this.form.token) {
              await postSchedules({ ...this.form });
            } else {
              await putSchedules({ ...this.form });
            }
            this.btnLoading = false;
            this.close(true);
            this.$msg({
              type: "success",
              message: "提交成功"
            });
          } catch (error) {
            this.btnLoading = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close(isReset) {
      this.form = {
        name: "",
        triggerType: "",
        triggerConfiguration: {
          repeatCount: "",
          repeatInterval: "",
          cronExpression: ""
        }
      };
      this.$refs["ruleForm"].resetFields();
      this.$emit("update:dialogVisible", false);
      this.$emit("close", isReset);
    }
  }
};
</script>

<style></style>
